<template>
  <el-container class="order-container">
    <el-main>
      <el-row :gutter="10">
        <h4>育儿顾问信息</h4>
        <p>售前顾问：{{preSalerInfo.realname}}
          <el-button v-if="!afterSalerInfo.adminUserId" type="primary" size="mini" @click.prevent="changeSaler('pre',preSalerInfo.adminUserId)">变更顾问</el-button>
        </p>
        <p>售后顾问：{{afterSalerInfo.realname||'无'}}
          <el-button v-if="afterSalerInfo.adminUserId" type="primary" size="mini" @click.prevent="changeSaler('after',afterSalerInfo.adminUserId)">变更顾问</el-button>
        </p>
      </el-row>
      <el-row :gutter="10">
        <h4>顾问老师分配记录</h4>
        <table-view
          :templateDiv="{salerType:true}"
          :columns="recordsTableContent"
          :pageList="salerChangeRecords">
          <template slot="salerType" slot-scope="scope">
            {{scope.row.salerType | salerTypeFilter}}
          </template>
        </table-view>
      </el-row>
    </el-main>
    <el-footer></el-footer>

    <el-dialog title="变更顾问" :visible.sync="dialogVisible" width="50%" :destroy-on-close="true">
      <el-form ref="form" :model="form" :rules="rule" label-width="120px" style="width: 85%">

        <el-form-item label="用户id：">
          {{dialogType==='pre'?preSalerInfo.adminUserId:afterSalerInfo.adminUserId}}
        </el-form-item>
        <el-form-item label="顾问类型：">
          {{dialogType==='pre'?preSalerInfo.type:afterSalerInfo.type | salerTypeFilter}}
        </el-form-item>
        <el-form-item label="老顾问：">
          {{dialogType==='pre'?preSalerInfo.realname:afterSalerInfo.realname}}
        </el-form-item>

        <el-form-item prop="targetSalerId" label="分配给顾问:">
          <el-select v-model="form.targetSalerId" clearable placeholder="请选择新顾问">
            <el-option
              v-for="item in transSaleOption"
              :key="item.adminUserId"
              :label="item.realname"
              :value="item.adminUserId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
  import TableView from '@/components/TableView'

  import * as pageApi from '@/api/user/userManage'
  import salerApi from '@/api/salers/salersManage'

  export default {
    name: 'saleInfo',
    components: {
      TableView
    },
    props:{
      active:{
        type:String,

      }
    },
    data() {
      return {
        id:'',
        dialogVisible: false,
        dialogType:'',
        salerChangeRecords: [],
        preSalerInfo: {},
        afterSalerInfo: {},
        recordsTableContent: [
          {
            field: 'adminUsername',
            label: '顾问姓名'
          }, {
            field: 'adminUserId',
            label: 'id'
          }, {
            field: 'salerType',
            label: '类型'
          }, {
            field: 'createTime',
            label: '时间'
          }],
        form: {
          targetSalerId: ''
        },
        rule: {},
        transSaleOption: []
      }
    },
    filters: {
      salerTypeFilter(val) {
        return {
          1: '售前',
          2: '售后'
        }[val]
      }
    },
    watch:{
      active:{
        handler(val){
          if(val === 'saler'){
            this.getDetailById()
          }
        },
        immediate:true
      }
    },
    methods: {
      getTransSaleList(type, adminUserId) {
        salerApi.findByType(type, adminUserId).then(res => {
          this.transSaleOption = res.body
          this.dialogVisible = true
        })
      },
      changeSaler(type,adminUserId) {
        this.dialogType = type
        switch (type) {
          case 'pre':
            this.form.sourceSalerId = adminUserId
            this.form.type = this.preSalerInfo.type
            this.getTransSaleList(this.preSalerInfo.type, adminUserId)
            break
          case 'after':
            this.form.sourceSalerId = adminUserId
            this.form.type = this.afterSalerInfo.type
            this.getTransSaleList(this.afterSalerInfo.type, adminUserId)
            break
        }
      },
      onSubmit() {
        let _this = this
        _this.$refs['form'].validate((valid) => {
            if (valid) {
              salerApi.remove(this.form).then(res=>{
                this.handleMessage(res)
                if(res.code === '200'){
                  this.dialogVisible=false
                  this.$refs['form'].resetFields();
                  this.getDetailById()
                }
              })
            }
        })
      },
      getDetailById() {
        pageApi.getSalerInfoById(this.id).then(res => {
          let data = res.body
          this.preSalerInfo = data.preSalerInfo
          this.afterSalerInfo = data.afterSalerInfo||{}
          this.salerChangeRecords = data.salerChangeRecords
        })
      }
    },
    mounted() {
      let { id } = this.$route.query
      this.id = id
      //this.getDetailById()
    }
  }
</script>

<style lang="scss" scoped>
  .bottom-line-area .bottom-line:last-child {
    border: none;
  }

  .order-container {
    font-pageSize: 13px;
  }

  h4 {
    border-left: 1px solid #666;
    padding-left: 8px;
  }

  p {
    padding-left: 15px;
  }

  .order-statue {
    background: #ddd;
    padding: 8px;
  }

  .bottom-line {
    clear: both;
    border-bottom: 2px solid #666;
    padding-bottom: 10px;
    /*padding-top: 10px;*/
  }
</style>
